<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>文件上传表单</title>
</head>

<body>
    <h3>文件上传：</h3>
    选择一个文件上传: <br />
    <input id="file" type="file" name="image" size="50" />
    <img style="width: 200px;height: 200px;" src="" alt="" id="img">
    <button class="but">添加</button><br>
    <!-- <input class="file" type="file" name="manypic[]" multiple> -->
    <script src="../jquery.js"></script>
    <script src="../axios.min.js"></script>
    <script>
        $('.file').change(function () {
            let inp = $('.file').file
        })
        let formData;
        $('#file').change(function () {
            let inp = document.querySelector('#file').value;
            if (inp) {
                formData = new FormData()
                let file = document.querySelector('#file').files[0];
                console.log(file);
                //第一个参数代表后台stream.fieldname，
                formData.append('files', file);
            }
            var pic = document.querySelector('#file').files[0];
            var read = new FileReader();
            read.onload = function (e) {
                document.getElementById('img').src = e.target.result;
            };
            read.readAsDataURL(pic);

        })
        $('.but').click(function () {
            console.log(12232133);
            axios.post('http://localhost:3000/api/picture', formData).then(res => {
                console.log(res.data);
            })
        })
        // document.querySelector('#file').addEventListener('change', () => {
        //     let input = document.querySelector('#file')
        //     const reader = new FileReader()
        //     reader.readAsText(input.files[0]) // input.files[0]为第一个文件
        //     reader.onload = () => {
        //         document.body.innerHTML += reader.result  // reader.result为获取结果
        //     }
        // }, false)
        
    </script>
</body>

</html>